<template>
  <div class="media">
    <template v-if="data.length > 0">
      <el-card
        v-for="(item,index) in data"
        class="media-item"
        :key="index"
        shadow="never"
      >
        <div slot="header" class="header">
          <img :src="item.member.avatar">
          <p>{{ item.member.nickname }}</p>
        </div>
        <div class="content" @click="max(index)">
          <img :src="item.thumb_url">
          <div class="type">
            <svg-icon :icon-class="item.type === 'image' ? 'image' : 'video'" />
          </div>
        </div>
        <div class="footer">
          <el-button-group class="buttons">
            <el-button type="primary" size="small" @click="pass(index)">通过审核</el-button>
            <el-button type="danger" size="small" @click="remove(index)">删除素材</el-button>
          </el-button-group>
        </div>
      </el-card>
      <!--S分页-->
      <div id="pagination">
        <el-pagination
          layout="prev, pager, next"
          :page-size="page_size"
          :total="total"
          @current-change="changePage"
        />
      </div>
      <!--E分页-->
    </template>
    <template v-else>
      <h2 class="empty">暂无审核素材</h2>
    </template>

    <!--S放大素材-->
    <max
      v-if="max_data.show"
      :type="max_data.type"
      :src="max_data.src"
      @close="max_data.show = false"
    />
    <!--E放大素材-->

    <!--S删除素材-->
    <el-dialog
      title="请输入审核失败原因"
      :visible.sync="removeDialog.show"
    >
      <el-form
        ref="form"
        :rules="removeDialog.rules"
        :model="removeDialog.form"
      >
        <el-form-item prop="remark">
          <el-input v-model="removeDialog.form.remark" type="text" placeholder="请输入审核失败原因"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRemove">确定删除</el-button>
      </span>
    </el-dialog>
    <!--S删除素材-->
  </div>
</template>

<script>
import Max from './components/max'
export default {
  name: 'Media',
  components: {
    Max
  },
  data() {
    return {
      // 素材总数
      total: 0,
      page_size: 30,
      page: 1,
      data: [],
      // 放大播放素材组件数据
      max_data: {
        show: false,
        src: '',
        type: 'image'
      },
      // 删除素材弹窗
      removeDialog: {
        show: false,
        handle_index: 0, // 操作下标
        rules: {
          remark: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ]
        },
        form: {
          remark: '' // 备注信息
        }
      }
    }
  },
  mounted() {
    this.getTotal()
    this.getList()
  },
  methods: {
    // 获取等待审核素材总数
    getTotal() {
      this.$get('media/check/total')
        .then((res) => {
          this.total = res.data.data
        })
    },
    // 获取审核素材列表
    getList() {
      this.$get('media/check', {
        limit: [(this.page - 1) * this.page_size, this.page_size]
      })
        .then((res) => {
          this.data = res.data.data
        })
    },
    changePage(page) {
      this.page = page
    },
    /**
     * 放大素材
     */
    max(index) {
      let data = this.data[index]
      this.max_data = {
        show: true,
        type: data.type,
        src: data.type === 'image' ? data.image_url : data.video_url
      }
    },
    pass(index) {
      this.$put('media/pass/' + this.data[index].id)
        .then(() => {
          this.getTotal()
          this.getList()
        })
        .catch((error) => {
          this.$handleError(error)
        })
    },
    // 点击删除素材
    remove(index) {
      this.removeDialog.show = true
      this.removeDialog.handle_index = index
    },
    // 确认删除素材
    submitRemove() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$post('media/remove/' + this.data[this.removeDialog.handle_index].id, {
            remark: this.removeDialog.form.remark
          })
            .then(() => {
              this.removeDialog.show = false
              this.removeDialog.form.remark = ''
              this.getTotal()
              this.getList()
            })
            .catch((error) => {
              this.$handleError(error)
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .media {
    .media-item{
      width: 200px;
      float: left;
      margin: 10px 10px 0 0;
      .header{
        font-size: 12px;
        overflow: hidden;
        img{
          display: block;
          width: 35px;
          height: 35px;
          float: left;
          border-radius: 17.5px;
        }
        p{
          float: left;
          width: 110px;
          height: 35px;
          line-height: 35px;
          margin: 0 0 0 10px;
          padding: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .content{
        position: relative;
        height: 200px;
        cursor: pointer;
        img{
          display: block;
          width: 150px;
          height: 200px;
          margin: 0 auto;
          object-fit: contain;
        }
        .type{
          position: absolute;
          top:0;
          left:0;
        }
      }
      .footer{
        margin-top: 10px;
        width: 160px;
        height: 33px;
      }
    }
    #pagination{
      clear: both;
      width: 100%;
      text-align: center;
    }
    .empty{
      height: 60px;
      line-height: 60px;
      font-size: 14px;
      text-align: center;
      color: #97a8be;
    }
  }
</style>
